import React from 'react'
// import PropTypes from 'prop-types'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Table, Button, Space, Modal, message } from 'antd'
import style from './Index.module.less'
import { getColumn } from './util'
import { ExclamationCircleOutlined } from '@ant-design/icons'

const { confirm } = Modal

class Main extends Component {
  state = {
    loading: false,
    dataSource: []
  }

  initFeeList () {
    this.setState({ loading: true })
    this.$get('/api/xapc/pay/getCasePay', { caseid: this.props.caseDetail.id })
      .then(res => {
        this.setState({ loading: false })
        if (res.data instanceof Array) {
          const list = res.data
          list.forEach((li, i) => {
            li.orderno = i + 1
          })
          this.setState({ dataSource: res.data })
        }
      })
      .catch(e => this.setState({ loading: false }))
  }

  createFile () {
    const hide = message.loading('文件生成中')
    this.$post('/api/vendor/file/createByKey', {
      filecode: 'zhongcaifeiyongmingxibiao',
      caseid: this.props.caseDetail.id
    }).then(() => {
      hide()
      this.$getFileList(this.props.caseDetail.id)
    }).catch(e => {
      hide()
    })
  }

  reCreateFile (id) {
    const hide = message.loading('文件生成中')
    this.$post('/api/vendor/case/regenerate_file', {
      id
    }).then(() => {
      hide()
      this.$getFileList(this.props.caseDetail.id)
    }).catch(e => {
      hide()
    })
  }

  confirmHandle (id) {
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: `您确定要${id ? '重新' : ''}生成仲裁费用明细表吗？`,
      onOk: () => {
        if (id) {
          this.reCreateFile(id)
        } else {
          this.createFile()
        }
      }
    })
  }

  componentDidMount () {
    this.$getFileList(this.props.caseDetail.id)
    this.initFeeList()
  }

  renderFile () {
    if (!this.state._fileListLoaded) {
      return null
    }
    let file = null
    const list = this.state._fileList || []
    for (let i = 0; i < list.length; i++) {
      if (list[i].title === '仲裁费用明细表') {
        file = list[i]
        break
      }
    }
    if (file === null) {
      return <div className={style['operate-line']}><Button type='primary' onClick={() => this.confirmHandle()}>生成仲裁费用明细表</Button></div>
    }
    return (
      <div className={style['operate-line']}>
        <Space>
          <span>
            <span>文书：</span>
            <a onClick={() => this.$readerFileById(file.id, this.props.caseDetail.id)} rel='noopener noreferrer'>{file.title}</a>
          </span>
          <Button type='primary' onClick={() => this.confirmHandle(file.id)}>重新生成</Button>
        </Space>
      </div>
    )
  }

  render () {
    return (
      <div>
        {this.renderFile()}
        <Table rowKey='payid' pagination={false} columns={getColumn()} loading={this.state.loading} dataSource={this.state.dataSource} />
      </div>
    )
  }
}

Main.propTypes = {
  // refreshCaseData: PropTypes.func
}

Main.defaultProps = {
  caseDetail: {},
  active: false,
  refreshCaseData: () => {},
  editable: false,
  fileList: [],
  getFileList: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(Main)
